<template>
  <div class="page" style="">
    <div class="print_title">费用报销详情 · 禾美环保</div>
    <p class="title">费用类别</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px; position: relative;">
      <!-- <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >费用类别:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.billNo }}</p>
          </a-col>
        </a-row>
      </a-col> -->
      <a-col :span="24">
        <a-row style="margin-bottom: 10px">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >费用类别:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.feeCategory_dictText }}</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.feeCategory=='0'?'职工薪酬类报销（不含集中采购的节日福利）':formData.feeCategory=='1'?"需签订合同的采购类报销":"其他场景" }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px; position: relative;">
      <vue-qr
        class="codeImg"
        v-if="formData.bpmStatus == '3'"
        ref="qrCodeImg"
        :text="qrCodeText"
      ></vue-qr>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.billNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >报销人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.proposer_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所在部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.proposerDeptId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >本次是否付款:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.isPay_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请公司:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applicant_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >团队费用类别:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.teamFeeCategory_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <!-- <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >出差人员:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.employeeName }}</p>
          </a-col>
        </a-row>
      </a-col> -->
      <!-- <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >是否外聘人员:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.isExternalEngagedEmployee_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >外聘人员:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.externalPersonnel }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据类型:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.billCategory_dictText }}</p>
          </a-col>
        </a-row>
      </a-col> -->
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >费用所属团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.teamId_dictText?formData.teamId_dictText:formData.teamId }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="formData.teamYear=='2023'">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >费用所属年度:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.teamYear_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据类型:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.billCategory_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >填表时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.createTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <!-- <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >本次是否付款:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.isPay_dictText }}</p>
          </a-col>
        </a-row>
      </a-col> -->
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >本次付款金额(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.payAmount }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >累计报销金额(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.accumulateAmount }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >本次累计冲账金额(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.chargedAmount }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >是否使用商务卡:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.isUseBusinessCard_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >报销说明:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applyExplain }}</p>
          </a-col>
        </a-row>
      </a-col>

    </a-row>

    <p class="title" style="margin-top: 18px;">费用报销信息</p>
    <a-row type="flex" justify="center" v-if="formData.feeCategory ==0">
      <!-- 工资福利类 -->
      <a-col :span="24" >
        <a-table
          :columns="salaryColumns"
          :data-source="formData.salaryFeeInfoList"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass">
        </a-table>
      </a-col>
    </a-row>
    <a-row type="flex" justify="center" v-if="formData.feeCategory==2">
      <a-col :span="24" >
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >是否关联项目:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.isRelProject_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-table
          :columns="formData.isRelProject=='1'?columns:precolumns"
          :data-source="formData.dailyFeeInfoList"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass">
        </a-table>
      </a-col>
    </a-row>

    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;" v-if="formData.feeCategory==1">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >采购大类:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.bigCategory_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >采购小类:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.smallCategory_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >项目名称:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.projectId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >项目编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.projectCode }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >业绩归属年度:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.performanceAttributionYear }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;" >
            <p style="margin-bottom: 0; white-space: nowrap" >关联采购合同:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.relContractId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;" >
            <p style="margin-bottom: 0; white-space: nowrap" >发票类型:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.isSpecial_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <template v-if="formData.purchaseyFeeInfo.projectId">
        <a-col :span="12" >
          <a-row>
            <a-col style="display: flex;" >
              <p style="margin-bottom: 0; white-space: nowrap" >收款合同金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.contractTotalAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >项目已回款金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.contractActualCollectAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
      </template>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >应付款金额(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.paymentAmount }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >已付金额(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.collectedAmount }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >未付金额(含扣款)(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.unpaymentAmount }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >报销金额(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.amount }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >税费金额(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.taxation }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >未税金额(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.untaxedAmount }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >税率(%):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseyFeeInfo.taxRate }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px; margin-top: 18px;">
      <a-col :span="12" v-if="formData.isPay=='1'">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >结算方式:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.settleType_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <template v-if="this.formData.settleType==0 && formData.isPay=='1'">
        <a-col :span="12" v-if="formData.isPay=='1'">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >转账类型:</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.transferType_dictText }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12" v-if="formData.transferType">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >收款户名:</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.accountName_dictText }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12" v-if="formData.accountName">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >收款方开户行:</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.bankName }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12" v-if="formData.accountName">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >开户行联行号:</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.cnapsCode }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12" v-if="formData.accountName">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >收款方银行账户:</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.accountNo }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12" v-if="formData.accountName">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >打款附言:</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.postscript }}</p>
            </a-col>
          </a-row>
        </a-col>
      </template>

      <template v-if="formData.isPay">
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >冲账单据类型:</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.relBillType_dictText }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12" v-if="formData.relBillType==3">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >关联单据单号:</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ relBillId_dictText }}</p>
            </a-col>
          </a-row>
        </a-col>
      </template>
      <template v-if="formData.relBillType==1||formData.relBillType==2">
        <a-col :span="24">
          <a-table
            :columns="formData.relBillType==1?chargedLoanColumns:chargedPayColumns"
            :data-source="chargedInfoList"
            bordered
            :pagination="false"
            size="small"
            :rowClassName="tableRowClass">
          </a-table>
        </a-col>
      </template>
      <!-- <template v-if="formData.relBillType == 1">
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >借款金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.borrowLoanAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >已还金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.borrowOnloanAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >未还金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.borrowUnloanAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >剩余未付金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.borrowPayAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
      </template>
      <template v-if="formData.relBillType == 2">
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >预付金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.payPayableAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >已冲账金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.payOnChargedAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >未冲账金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.payUnChargedAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
      </template> -->
      <template v-if="formData.relBillType == 3">
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >保证金总额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.depositRemittanceAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >服务费(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.depositServiceCharge }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >利息金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.depositInterestAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >归还金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.depositReturnAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap" >未归还金额(元):</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.depositUnreturnAmount }}</p>
            </a-col>
          </a-row>
        </a-col>
      </template>
    </a-row>

    <p class="title" style="margin-top: 18px;" v-if="formData.checkStatus=='2' && detail">处理信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;" v-if="formData.checkStatus=='2' && detail">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >本次付款金额(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.payAmount }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >付款人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.payHandlerId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >付款时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.payTime }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" title="附件信息" v-if="purchaseFile && purchaseFile.length"></FileInfor>

    <!-- 流程详情 -->
    <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
import address from '@/components/AddressChoice/address.js'
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
import Area from '@/components/_util/Area'
import VueQr from 'vue-qr'
export default {
	props: {
		formData: {
			type: Object,
			default: () => {},
			required: true
    },
		formDataHistory: {
			type: Object,
			default: () => {},
			required: true
    },
		detail: {
			type: Boolean,
			default: false
    }
	},
  components: {
    FileInfor,
    ProcessInfor,
    VueQr
  },
  data() {
    return {
      qrCode: null,
      address,
      filterMultiDictText,
      dictOptions: {},
      dataSource: [], // 物料列表
      salaryColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 45,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },

        {
          title: '工资福利大类',
          align: 'center',
          dataIndex: 'bigCategory',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['bigCategory'], text + '')
            }
          }
        },
        {
          title: '工资福利小类',
          align: 'center',
          dataIndex: 'smallCategory',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['smallCategory'], text + '')
            }
          }
        },
        {
          title: '发票类型',
          align: 'center',
          dataIndex: 'isSpecial',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['isSpecial'], text + '')
            }
          }
        },
        {
          title: '报销金额(元)',
          align: 'center',
          dataIndex: 'amount'
        },
        {
          title: '税费金额(元)',
          align: 'center',
          dataIndex: 'taxation'
        },
        {
          title: '未税金额(元)',
          align: 'center',
          dataIndex: 'untaxedAmount'
        },
        {
          title:'税率（%）',
          align:"center",
          dataIndex: 'taxRate',
        },
      ],
      chargedLoanColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title:'冲账借款单据',
          align:"center",
          dataIndex: 'relBillId',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['relLoanBillId'], text + '')
            }
          }
        },
        {
          title:'借款金额(元)',
          align:"center",
          dataIndex: 'borrowLoanAmount',
        },
        {
          title:'已还金额(元)',
          align:"center",
          dataIndex: 'borrowOnloanAmount',
        },
        {
          title:'本次冲账金额(元)',
          align:"center",
          dataIndex: 'chargedAmount',
        },
        {
          title:'剩余未冲账金额(元)',
          align:"center",
          dataIndex: 'unChargedAmount',
        },
      ],
      chargedPayColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title:'冲账付款单单据',
          align:"center",
          dataIndex: 'relBillId',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['relPayBillId'], text + '')
            }
          }
        },
        {
          title:'预付款金额(元)',
          align:"center",
          dataIndex: 'payPayableAmount',
        },
        {
          title:'已冲账金额(元)',
          align:"center",
          dataIndex: 'payOnChargedAmount',
        },
        {
          title:'本次冲账金额(元)',
          align:"center",
          dataIndex: 'chargedAmount',
        },
        {
          title:'剩余未冲账金额(元)',
          align:"center",
          dataIndex: 'unChargedAmount',
        },
      ],
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 30,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'projectId',
          width: 50,
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['projectId'], text + '')
            }
          }
        },
        {
          title: '项目编号',
          align: 'center',
          width: 50,
          dataIndex: 'projectCode'
        },
        {
          title: '业绩归属年度',
          align: 'center',
          dataIndex: 'performanceAttributionYear',
          width: 40,
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['performanceAttributionYear'], text + '')
            }
          }
        },
        {
          title: '合同名称',
          align: 'center',
          dataIndex: 'relContractId',
          width: 50,
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['relContractId'], text + '')
            }
          }
        },
        {
          title: '任务分类',
          align: 'center',
          width: 50,
          dataIndex: 'taskCategory',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['taskCategory'], text + '')
            }
          }
        },
        {
          title: '费用大类',
          width: 45,
          align: 'center',
          dataIndex: 'bigCategory',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['bigCategory'], text + '')
            }
          }
        },
        {
          title: '费用小类',
          width: 30,
          align: 'center',
          dataIndex: 'smallCategory',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              var smallCategory = filterMultiDictText(this.dictOptions['smallCategory'], text + '');
              return smallCategory
            }
          }
        },
        {
          title: '发票类型',
          align: 'center',
          dataIndex: 'isSpecial',
          width: 60,
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['isSpecial'], text + '')
            }
          }
        },
        {
          title: '报销金额(元)',
          align: 'center',
          dataIndex: 'amount',
          width: 40
        },
        {
          title: '税费金额(元)',
          align: 'center',
          dataIndex: 'taxation',
          width: 40
        },
        {
          title: '未税金额(元)',
          align: 'center',
          dataIndex: 'untaxedAmount',
          width: 45
        },
        {
          title:'税率（%）',
          align:"center",
          dataIndex: 'taxRate',
          width: 45
        },
			],
      precolumns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 30,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },

          {
            title: '费用大类',
            align: 'center',
            dataIndex: 'bigCategory',
            customRender: (text) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['bigCategory'], text + '')
              }
            }
          },
          {
            title: '费用小类',
            align: 'center',
            dataIndex: 'smallCategory',
            customRender: (text) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['smallCategory'], text + '')
              }
            }
          },
          {
            title: '发票类型',
            align: 'center',
            dataIndex: 'isSpecial',
            customRender: (text) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['isSpecial'], text + '')
              }
            }
          },
          {
            title: '报销金额(元)',
            align: 'center',
            dataIndex: 'amount'
          },
          {
            title: '税费金额(元)',
            align: 'center',
            dataIndex: 'taxation'
          },
          {
            title: '未税金额(元)',
            align: 'center',
            dataIndex: 'untaxedAmount'
          },
          {
            title:'税率（%）',
            align:"center",
            dataIndex: 'taxRate',
          },
        ],

      dataSource1: [], // 印章列表
        columns1: [
        {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 30,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '项目名称',
            align: 'center',
            dataIndex: 'projectId',
            width: 35,
            customRender: (text, r) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['projectId'], text + '')
              }
            }
          },
          {
            title: '任务分类',
            align: 'center',
            dataIndex: 'taskId',
            width: 50,
            customRender: (text, r) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['taskId'], text + '')
              }
            }
          },
          {
            title: '业绩归属年度',
            align: 'center',
            width: 40,
            dataIndex: 'attributionYear',

            customRender: (text, r) => {
              if (!text) {
                return ''
              } else {
                var attributionYear = filterMultiDictText(this.dictOptions['attributionYear'], text + '');
                return attributionYear
              }
            }
          },
          {
            title: '出发时间',
            align: 'center',
            dataIndex: 'setOutTime',
            width: 40
          },
          {
            title: '回程时间',
            align: 'center',
            dataIndex: 'backTime',
            width: 40
          },
          {
            title: '出差天数',
            align: 'center',
            dataIndex: 'days',
            width: 35
          },
          {
            title: '报销内容',
            align: 'center',
            dataIndex: 'selfDriving',
            width: 35,
            customRender: (text, r) => {
              if (!text) {
                return ''
              } else {
                var selfDriving = filterMultiDictText(this.dictOptions['selfDriving'], text + '');
                return selfDriving
              }
            }
          },
          {
            title: '交通方式',
            align: 'center',
            dataIndex: 'selfDrivingMode',
            width: 30,

            customRender: (text, r) => {
              if (!text) {
                return ''
              } else {
                var selfDrivingMode = filterMultiDictText(this.dictOptions['selfDrivingMode'], text + '');
                return selfDrivingMode
              }
            }
          },
          {
            title: '出发地点',
            align: 'center',
            dataIndex: 'departurePlace',
            width: 40,
            scopedSlots: { customRender: 'departurePlace' }
          },
          {
            title: '到达地点',
            align: 'center',
            dataIndex: 'targetPlace',
            width: 40,
            scopedSlots: { customRender: 'targetPlace' }
          },
          {
            title: '出发里程数(km)',
            align: 'center',
            dataIndex: 'startMileage',
            width: 45
          },
          {
            title: '返程里程数(km)',
            align: 'center',
            dataIndex: 'endMileage',
            width: 45
          },
          {
            title: '里程数(km)',
            align: 'center',
            width: 40,
            dataIndex: 'mileage'
          },
          {
            title: '补贴单价(元)',
            align: 'center',
            width: 40,
            dataIndex: 'subsidyUnitPrice',

            customRender: (text, r) => {
              if (!text) {
                return ''
              } else {
                var subsidyUnitPrice = filterMultiDictText(this.dictOptions['subsidyUnitPrice'], text + '');
                return subsidyUnitPrice
              }
            }
          },
          {
            title: '报销金额(元)',
            align: 'center',
            dataIndex: 'amount',
            width: 40
          },
          {
            title: '补助领款人',
            align: 'center',
            dataIndex: 'subsidyProposer',
            width: 40,

            customRender: (text, r) => {
              if (!text) {
                return ''
              } else {
                var subsidyProposer = filterMultiDictText(this.dictOptions['subsidyProposer'], text + '');
                return subsidyProposer
              }
            }
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remark'
          }

        ],

			dataHistorySource: [], // 流程列表
			url: {
				list: '/api/erp/finance/travel/erpFinanceTravelReimbursementDetail/allList',
				suppliesList: '/api/erp/finance/travel/erpFinanceTravelReimbursementDetail/allList',
				historyList: '/api/erpmng/act/task/processHistoryList', // 流程历史跟踪接口
        querySettleAccountName: '/api/erp/purchase/supplier/erpPurchaseSupplier/queryById',
				queryByIdFinanceLoanBill: '/api/erp/finance/borrow/erpFinanceLoanBill/queryById', // 根据id查询费用报销关联单据编号 - 收款单
				queryByIdFinancePaymentSlipFeeDetail: '/api/erp/finance/payment/erpFinancePaymentSlip/queryById', // 根据id查询费用报销关联单据编号 - 付款单
				queryByIdFinanceProjectDepositBill: '/api/erp/finance/deposit/erpFinanceProjectDepositBill/queryById', // 根据id查询费用报销关联单据编号 - 保证金
				erpEmployeeFileQueryFileById: '/api/erp/files/employee/erpEmployeeFile/queryFileById', // 查询姓名
				getChildrenListPurchasey: '/api/erp/finance/reimbursement/erpFinanceReimbursementPurchaseyFeeInfo/queryByBillId', // 根据billId查询费用'// 查询采购类
				erpOmcContractManagerFinalQueryById: '/api/erp/omc/contractmanager/erpOmcContractManagerFinal/queryById', // 根据billId查询费用'// 查询采购类
				erpProgressPaymentNodeQueryByIds: '/api/erp/progress/erpProgressPaymentNode/queryByIds', // 费用报销单 - 合同款项详情
        queryCharagedListById:"/api/erp/finance/reimbursement/erpFinanceReimbursementChargedBillInfo/queryBillById"
			},
			purchaseFile: [], // 附件
      relBillId_dictText: '',
      chargedInfoList: []
    };
  },
	watch: {
		formData: {
			async handler (val) {
				if (val) {
          this.pcaData = new Area()
					this.list()
					// this.getHistoryList()
          this.initDictConfig() // 字典值
          this.relBillType() // 关联单据单号
          this.getNameDetail(val.accountName) // 关联单据单号
          // 查询收款户名
          if (val.settleType == 0 && val.isPay == '1' && val.transferType) {
              getAction(this.url.querySettleAccountName, { id: val.accountName }).then(async res => {
                if (res.success) {
                  this.formData.accountName_dictText = res.result.bankAccountName
                }
            })
          }
          if (val.feeCategory == 1) {
            this.getChildData1(val.id) // 采购类
          }
          if(val.relBillType){
            if(val.relBillType=='1' || val.relBillType=='2'){
              this.getChildTableData(val.id)
            } else {
              this.chargedInfoList = []
            }
          }
					if (val.attachments) {
						this.purchaseFile = val.attachments.split(',')
					}
				}
			},
			immediate: true
		},
		formDataHistory: {
			handler (val) {
				if (val) {
					this.getHistoryList()
				}
			},
			immediate: true
		}
	},
  computed: {
    qrCodeText () {
      return JSON.stringify({
        billNo: this.formData.billNo,
        billType: '1',
      })
    }
  },
	methods: {
    getPcaText(code) {
      return this.pcaData.getText(code);
    },
		// 获取列表
		async getHistoryList() {
			var params = await { processInstanceId: this.formDataHistory.procInsId };// 查询条件
			getAction(this.url.historyList, params).then(async res => {
				if (res.success) {
					this.dataHistorySource = res.result.records || res.result
				}
			})
		},
    async getChildTableData(id) {
      let param = await { billId: id }
      getAction(this.url.queryCharagedListById, param).then(async (res) => {
        if (res.success) {
          let data = res.result;
          if (data.records != undefined) {
            data = data.records
          }
          this.chargedInfoList = data || []
        }
      })
    },
    // 查询单据单号
    relBillType () {
      var queryById = ''
      var params = ''
      if (this.formData.relBillType == 1) {
        queryById = this.url.queryByIdFinanceLoanBill
        params = {
          id: this.formData.relBillId
        }
      } else if (this.formData.relBillType == 2) {
        queryById = this.url.queryByIdFinancePaymentSlipFeeDetail
        params = {
          id: this.formData.relBillId
        }
      } else if (this.formData.relBillType == 3) {
        queryById = this.url.queryByIdFinanceProjectDepositBill
        params = {
          id: this.formData.relBillId
        }
      }
      if (!queryById) {
        return false
      }
      getAction(queryById, params).then(async res => {
        if (res.success) {
          this.relBillId_dictText = res.result.billNo
          if (this.formData.relBillType == 2) {
            this.relBillId_dictText = res.result.records[0].billNo
          } else {
            this.relBillId_dictText = res.result.billNo
          }
        } else {
          // this.$message.error(res.message)
        }
      })
    },

    // 查询采购类
    async getChildData1(id) {
      getAction(this.url.getChildrenListPurchasey, { billId: id }).then(async res => {
        if (res.success) {
          this.formData.purchaseyFeeInfo = await res.result || {}
          if (res.result && res.result.relContractId && res.result.projectId && res.result.projectId_dictText) {
            this.getErpOmcContractManagerFinalQueryById(res.result.relContractId)
          }
          if (res.result && res.result.contractPaymentId && res.result.projectId) {
            this.getErpProgressPaymentNodeQueryByIds(res.result.contractPaymentId)
          }
          if (!res.result.projectId) {
            if (res.result.contractPaymentId_dictText) {
              var arr = res.result.contractPaymentId_dictText.split(',')
              var name = ''
              arr.map(value => {
                if (value == 1) {
                  name = '预付款' + ',' + name
                }
                if (value == 2) {
                  name = '进度款' + ',' + name
                }
                if (value == 3) {
                  name = '尾款' + ',' + name
                }
              })
              name = name.slice(0, name.length - 1)
            }
            this.formData.purchaseyFeeInfo.contractPaymentId_dictText = name
          }
        }
			})
		},
    // 查询关联采购合同详情
    async getErpOmcContractManagerFinalQueryById (id) {
      getAction(this.url.erpOmcContractManagerFinalQueryById, { id }).then( async res => {
        if (res.success) {
          this.formData.purchaseyFeeInfo.relContractId_dictText = res.result.htmc
        }
      })
    },

    // 查询合同款项详情
    getErpProgressPaymentNodeQueryByIds (ids) {
      getAction(this.url.erpProgressPaymentNodeQueryByIds, { ids }).then(res => {
        if (res.success) {
          var name = ''
          if (res.result && res.result.length) {
            res.result.map(value => {
              name = value.nodeName + ',' + name
            })
          }
          name = name.slice(0, name.length - 1)
          this.formData.purchaseyFeeInfo.contractPaymentId_dictText = name
        }
      })
    },

    // 查询姓名
    async getNameDetail (id) {
      getAction(this.url.erpEmployeeFileQueryFileById, { id }).then(res => {
        if (res.success) {
          this.formData.accountName_dictText = res.result.name
        }
      })
    },

    async initDictConfig() {
      initDictOptions('erp_omc_team_manager,alias_name,id').then(async (res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'teamId', res.result)
        }
      })
      // initDictOptions('tdnd_type').then((res) => {
      //   if (res.success) {
      //     this.$set(this.dictOptions, 'teamYear', res.result)
      //   }
      // })
      initDictOptions('erp_finance_loan_bill,bill_no,id').then(async (res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'relLoanBillId', res.result)
          }
        })
        initDictOptions('erp_finance_payment_slip,bill_no,id').then(async (res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'relPayBillId', res.result)
          }
        })
      initDictOptions('sys_category,name,code').then(async (res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'bigCategory', res.result)
          this.$set(this.dictOptions, 'smallCategory', res.result)
        }
      })
      initDictOptions('cost_invoice_type').then(async (res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'isSpecial', res.result)
        }
      })
      initDictOptions('yjgsnd').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'performanceAttributionYear', res.result)
        }
      })
      initDictOptions('erp_omc_project,project_name,id').then(async (res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'projectId', res.result)
        }
      })
      initDictOptions('erp_omc_project_task,category_name,id').then(async (res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'taskCategory', res.result)
        }
      })
      initDictOptions('erp_omc_contract_manager_final,htmc,id').then(async (res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'relContractId', res.result)
        }
      })
    },

		list () {
			if (!this.formData.id) {
				return false
			}
			var params = {
        billId: this.formData.id,
        detailType: 1
			}
			getAction(this.url.list, params).then(res => {
				if (res.success) {
          let count = 0
          this.dataSource = res.result.records || res.result
          this.dataSource.forEach((item, index) => {
            item.key = index
            count = count + item.amount
					})
          this.formData.reimbursementAmount = count.toFixed(2)
				}
      })
			getAction(this.url.suppliesList, { billId: this.formData.id, detailType: 2 }).then(res => {
				if (res.success) {
            let count = 0
						this.dataSource1 = res.result.records || res.result
						this.dataSource1.forEach((item, index) => {
						item.key = index
            count = count + item.amount
            this.formData.kilometresAmount = count.toFixed(2)
					})
				}
      })
		},

		tableRowClass(record, index) {
			console.log('record, index', record, index)
			if (index == 0) {
				return 'rowClass';
			}
      return ''
    },

    getAddress (text) {
      if (!text) {
        return false
      }
      var areaList = text.split(',')
      var areaText = ''
      this.address.map(value => {
        if (areaList[0] && areaList[0] == value.code) {
          areaText = areaText + value.name + '/'
          if (value && value.children && value.children.length) {
            value.children.map(val => {
              if (areaList[1] && areaList[1] == val.code) {
                areaText = areaText + val.name + '/'

                if (val && val.children && val.children.length) {
                  val.children.map(va => {
                    if (areaList[2] && areaList[2] == va.code) {
                      areaText = areaText + va.name
                    }
                  })
                }
              }
            })
          }
        }
      })
      return areaText
    }
	}
};
</script>
<style lang="less" scoped>
.page{
	background: #ffffff;
	padding: 19px 28px 0 28px;
	width: 750px;
	.print_title{
		font-size: 15px;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 9px;
	}
	.title {
		background: #EEEEEE;
		font-size: 13px;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		color: #000000;
		padding: 11px 9px;
	}
	.title_table{
		font-size: 13px;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		color: #000000;
	}
}
/deep/ .rowClass{
	font-size: 10px;
	font-family: Alibaba PuHuiTi 2.0;
	font-weight: normal;
	color: #000000;
}
/deep/ .ant-table-thead th{
	font-size: 10px;
	font-family: Alibaba PuHuiTi 2.0;
	font-weight: normal;
	color: #000000;
  padding: 0 !important;
}
/deep/ .ant-table-thead tr{
	background: #EEEEEE;
}
/deep/ .ant-table-small > .ant-table-content > .ant-table-body {
    margin: 0 0px;
}
/deep/ .ant-table-body tr {
	font-size: 10px;
	font-family: Alibaba PuHuiTi 2.0;
	font-weight: normal;
	color: #000000;
}
/deep/ .ant-table-body tr td {
    word-wrap:break-word;
    word-break:break-all;
  }
/deep/ .ant-table-body td {
  padding: 0 !important;
}
.content {
  font-size: 13px;
}
.codeImg{
  width: 56px;
  height: 56px;
  background: #ccc;
  position: absolute;
  right: 0px;
  top: 0px;
}
</style>
